tags: 2021鐵人賽 React

一般來說在開發階段，前端與後端會討論資料需求，讓API產出的內容能夠滿足前端畫面的需求，不過這次因為是串接外部的API，因此API的內容已經是固定的，所以前端就需要配合API的內容去思考能做到哪些部份，以及資料要如何整理成符合畫面需求的格式。因此，本篇就來來比對一下wireframe上的資料，與API提供的資料是否能夠對得上。

首頁畫面

首先來看首頁的畫面，包含：台灣股市、美國股市、國際股市三個部份的資料。接下來就一個一個來對一下資料吧！

台灣股市資料集

• 加權指數收盤
  對應到api的資料集是TaiwanStockPrice，用Postman測試API如下圖，有最新交易日的開高低收價、漲跌點數、交易量、交易額，是可以滿足前端的資料需求的，只是漲跌百分比需要用漲跌點數除以前一天的收盤價去計算，還算簡單。
  

• 三大法人買賣超
  對應到的資料集是TaiwanStockTotalInstitutionalInvestors，用Postman打出來資料如下。看起來資料也是沒問題的。

{
    "msg": "success",
    "status": 200,
    "data": [
        {
            "buy": 2493597654,
            "date": "2021-09-29",
            "name": "Dealer_self",
            "sell": 10303678904
        },
        {
            "buy": 5945369029,
            "date": "2021-09-29",
            "name": "Dealer_Hedging",
            "sell": 8827375875
        },
        {
            "buy": 5385739262,
            "date": "2021-09-29",
            "name": "Investment_Trust",
            "sell": 2835013865
        },
        {
            "buy": 76878521979,
            "date": "2021-09-29",
            "name": "Foreign_Investor",
            "sell": 112334980438
        },
        {
            "buy": 14002490,
            "date": "2021-09-29",
            "name": "Foreign_Dealer_Self",
            "sell": 19938780
        },
        {
            "buy": 90703227924,
            "date": "2021-09-29",
            "name": "total",
            "sell": 134301049082
        }
    ]
}

以上三大法人買賣超的資料其實就是對應到下面證交所的這張表：

美國股市資料集

美股指數的部份就比較簡單了，因為就只有各大指數的收盤資料，來打打看API。
可以觀察一下Params，資料集是USStockPrice，start_date是2021-09-26，指數是用^DJI，發現結果會得到2021-09-26起始日後每個交易日的資料，包含：開高低收、調整收盤價、成交量，跟台股不一樣的地方是沒有給spread(漲跌點數)，因此至少要有最近兩個交易日的收盤價，才能去計算漲跌百分比，因此之後call api的時候就要注意要至少拿到兩個交易日的資料。

國際股市資料集

本來設計畫面的時候是有把國際股市的收盤資訊也放在首頁，不過後來發現API的部份已經不提供國際股市的資料了，需要再找到其他資料源來補，但因為時間有限，決定暫時先不做這一塊。

小結

在開發之前確認資料來源都已經好了是很重要的，比較不會發生開發到一半，然後沒有API可以串接的情況，就像是本篇國際股市資料集的部份，甚至是在一開始設計網站功能的時候，就可以將這個部份納入思考，可以節省較多時間。